<script setup lang="ts">
import router from "@/router";
import { onMounted, reactive } from "vue";
import { meetingStore } from "@/stores/frontData/he/main";
import { getStu } from "@/api/student/he/frontMain";

const store = meetingStore();
let student = reactive({
  username: "",
  image: "",
});
onMounted(() => {
  // 获取学生个人信息
  getStu().then((res) => {
    // console.log(res);
    student.username = res.data.data.username;
    student.image = res.data.data.image;

    store.student = res.data.data;
    // console.log(store.student);
  });
});
const mainStore = meetingStore();

const goMain = () => {
  router.push("/FrontMain");
};
// 退出
const exit = () => {
  router.push("/");
};
//账户安全
const accountAndSefe = () => {
  router.push("/AccountsAndSecurity");
};
//个人信息
const PersonalLnformation = () => {
  router.push("/PersonalLnformation");
};
//我的订单
const myOrder = () => {
  router.push("/OrderList");
};
//我的收藏
const myCollection = () => {
  router.push("/CourseCollection");
};
//我的会议
const myMeeting = () => {
  router.push("/mymeeting");
};
//我的考试
const myExam = () => {
  router.push("/myexam");
};
//我的课程表
const myClassTable = () => {
  router.push("/myClassList");
};
</script>
<template>
  <div class="nav">
    <div class="right">
      <div class="logo" @click="goMain">logo</div>
      <div class="logoword" @click="goMain">
        <span>在线课堂</span>
      </div>
    </div>

    <div class="right top">
      <div class="nav-img">
        <span class="iconfont icon-fenlei fentu"></span>
      </div>
      <!-- <div class="fen-word">分类</div> -->
    </div>

    <div class="class-sel">
      <div>
        <select name="" id="class-sel">
          <option value="">课程</option>
        </select>
        <input type="text" id="class-box" />
      </div>

      <div class="blue-but"></div>
    </div>

    <div class="vip top">会员中心</div>
    <div class="gift-img">
      <span class="iconfont icon-gift__easyico litu"></span>
    </div>

    <div class="right">
      <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link right top">
          <div class="login" id="login">
            <el-image
              style="
                width: 30px;
                height: 30px;
                border-radius: 30px;
                margin-top: -10px;
              "
              :src="student.image"
              fit="fit"
            />
          </div>
          <div class="adduser">{{ student.username }}</div>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="myClassTable"
              >我的课程表</el-dropdown-item
            >
            <el-dropdown-item @click="myExam">我的考试</el-dropdown-item>
            <el-dropdown-item @click="myMeeting">我的会议</el-dropdown-item>
            <el-dropdown-item @click="myCollection">课程收藏</el-dropdown-item>
            <el-dropdown-item @click="myOrder">全部订单</el-dropdown-item>
            <el-dropdown-item @click="PersonalLnformation"
              >个人信息</el-dropdown-item
            >
            <el-dropdown-item @click="accountAndSefe"
              >账号与安全</el-dropdown-item
            >
            <el-dropdown-item @click="exit">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<style scoped>
.nav {
  width: 100%;
  /* height: 70px;
  line-height: 70px; */
  background-color: white;

  display: flex;
  justify-content: space-around;
  padding-top: 10px;
}
.right {
  display: flex;
}
.top {
  padding-top: 20px;
}
.logo {
  width: 70px;
  height: 40px;
  border-radius: 10px;
  background-color: rgb(0, 110, 255);
  line-height: 40px;
  text-align: center;
  /* float: left; */
  font-size: 25px;
  color: white;
  cursor: pointer;
}
.logoword {
  font-size: 11px;
  cursor: pointer;
  font-weight: bold;

  margin-left: 10px;
}
.logoword span {
  font-size: 30px;
  font-weight: bold;
}
.fentu {
  font-size: 20px;
}

.class-sel {
  width: 400px;
  height: 38px;
  float: left;
  position: relative;
  margin-top: 10px;
  padding-bottom: 5px;
  display: flex;
}
.class-sel > div:first-child {
  border: 1px solid black;
}
#class-sel {
  width: 50px;
  height: 38px;
  margin: 0;
  border: 0;
  outline: none;
  border-right: 1px solid black;
  border-bottom: 1px solid black;

  /* float: left; */
}
#class-box {
  height: 33px;
  width: 300px;
  outline: none;
  border: 0;
  border-bottom: 1px solid black;
  /* float: left; */
}
.blue-but {
  width: 38px;
  height: 38px;
  background-color: rgb(0, 174, 255);
  top: 20px;
  /* float: left; */
}
.soutu {
  font-weight: bold;
  color: white;
}
.adduser {
  margin-left: 10px;
}

.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
